<template>
	<view class="systemMessage">
		<u-swipe-action>
			<u-swipe-action-item @click="delMessage(item)" :options="item.options" v-for="(item, index) in options4" :disabled="item.disabled" :key="index">
				<view class="swipe-action u-border-top" :class="[index === options4.length - 1 && 'u-border-bottom']">
					<view class="swipe-action__content" @tap="clearRedpoint(item.id)">
						<view class="sys_icon"><image class="icon-80" src="../../static/images/icon/icon_sys_message.png" mode=""></image></view>
						<view class="sys_content">
							<view class="sys_content_title">
								系统消息
								<view class="red_point" v-if="item.is_read == 0"></view>
							</view>
							<view class="sys_message_text">{{ item.text }}</view>
						</view>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
	</view>
</template>

<script>
import com from '../../mixin/index.js';
export default {
	mixins: [com],
	data() {
		return {
			options4: [],
			page: {
				page: 1,
				page_size: 20
			},
			messageList: {
				lists: [],
				total: 1,
				total_page: 0
			}
		};
	},
	onLoad() {
		this.getSysMessageList();
	},
	onReachBottom() {
		this.getSysMessageList();
	},
	methods: {
		delMessage(val) {
			console.log(val, '删除');
			this.$api.delMsg({ id: val.id }).then(res => {
				if (res.code == 1) {
					this.page.page = 1;
					this.messageList = {
						lists: [],
						total: 1,
						total_page: 0
					};
					this.getSysMessageList();
				}
			});
		},
		//清除红点
		clearRedpoint(id) {
			this.$api.readMsg({ id }).then(res => {
				if (res.code == 1) {
					this.page.page = 1;
					this.messageList = {
						lists: [],
						total: 1,
						total_page: 0
					};
					this.getSysMessageList();
				}
			});
		},
		getSysMessageList() {
			this.getList('messageList', 'getMessageList', 'page', { ...this.page }).then(res => {
				this.options4 = res.lists.map(item => {
					return {
						text: item.content,
						disabled: false,
						is_read: item.is_read,
						id: item.id,
						options: [
							{
								text: '删除',
								style: {
									backgroundColor: '#F34035'
								}
							}
						]
					};
				});
			});
		}
	}
};
</script>

<style lang="scss">
.systemMessage {
	padding: 0 24rpx;

	.swipe-action {
		&__content {
			padding: 30rpx 0;
			display: flex;
			.sys_icon {
				flex: none;
				margin-right: 18rpx;
			}
			.sys_content {
				.sys_content_title {
					position: relative;
					margin-bottom: 8rpx;
					color: #333;
					font-weight: bold;
					font-size: 28rpx;
					flex: none;
					width: fit-content;
					.red_point {
						width: 16rpx;
						height: 16rpx;
						background: #ff5634;
						border-radius: 50%;
						position: absolute;
						top: 10rpx;
						right: -24rpx;
					}
				}
				.sys_message_text {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
}
</style>
